<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script src="../../scripts/plugins/jquery.ztree.all.min.js"></script>
  <script src="../../scripts/lib/echarts-3.7.1/echarts.min.js"></script>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="#">Admin</a><a href="#"> 【注销】</a></span>
    </div>
  </div>

  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li> <a href="sys-db.html"><i class="icon-db"></i><span>日志管理</span></a><em class="open"></em>
        <ul>
          <li><a href="sys-disk.html">日志清理</a></li>
          <!-- <li><a href="sys-backup.html">数据备份</a></li> -->
        </ul>
      </li>

      <li class="active"> <a href="javascript:void(0);"><i class="icon-info-fill"></i><span>系统信息</span></a><em class="open"></em>
        <ul>
          <li  class="active"><a href="sys-info.html">系统信息</a></li>
          <li><a href="sys-email.html">邮件服务器</a></li>
          <li><a href="sys-collection.html">采集服务器</a></li>
          <li><a href="sys-server.html">客户端类型配置</a></li>
        </ul>
      </li>

      <li> <a href="sys-dictionary.html"><i class="icon-info-fill"></i><span>数据字典管理</span></a><em class="open"></em>
        <ul>
          <li><a href="sys-dictionary.html">码表管理</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title"><h2>系统信息</h2></div>

    <div class="sys-content">
      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">
            <h3>运行环境信息</h3>
          </div>
        </div>
        <div class="panel-body">
          <div class="col-4">
            <div class="box bg" style="margin:0 0 10px 10px;padding:10px;">
              <div class="form-box">
                <div class="form-item">
                  <div class="form-title">设备IP：</div>
                  <div class="form-content">192.168.3.2</div>
                </div>
                <div class="form-item">
                  <div class="form-title">设备版本号：</div>
                  <div class="form-content">V1.0.2.0.3</div>
                </div>
                <div class="form-item">
                  <div class="form-title">设备名称：</div>
                  <div class="form-content"><input type="text" class="input-normal" disabled value="脱敏设备301"></div>
                </div>
                <div class="form-item">
                  <div class="form-title">设备位置：</div>
                  <div class="form-content"><input type="text" class="input-normal" disabled value="中心机房-B区-201机柜"></div>
                </div>
                <div class="form-item">
                  <div class="form-title">管理员姓名：</div>
                  <div class="form-content"><input type="text" class="input-normal" disabled value="王子文"></div>
                </div>
                <div class="form-item">
                  <div class="form-title"> 联系方式：</div>
                  <div class="form-content"><input type="text" class="input-normal" disabled value="0871-64150217"></div>
                </div>
              </div>
              <div class="form-btn"><button id="edit" class="btn">编辑</button></div>
            </div>
          </div>
          <div class="col-8">
            <div class="chart col-4" id="chart21" style="height:200px;min-height:auto">loading......</div>
            <div class="chart col-4" id="chart22" style="height:200px;min-height:auto">loading......</div>
            <div class="chart col-4" id="chart23" style="height:200px;min-height:auto">loading......</div>
          </div>

        </div><!--panel-body end-->
      </div>
    </div>
  </div>


</body>
</html>
<script>
  $(document).ready(function(){
    $("#edit").on("click",function(){
      if($(this).text()=="编辑"){
        $(".form-content input").removeClass('input-normal').removeAttr("disabled");
        $(this).text("保存")}
        else{
          $(".form-content input").addClass('input-normal').prop("disabled","true");
          $(this).text("编辑")}
        })
  })


  var option21 = {
    title: {
      text: 'CPU使用率',
      "x": "center",
      "y":"bottom"

    },
    series: [{
      name: 'CPU使用率',
      type: 'gauge',
      radius: '100%',
      splitNumber: 10,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width:6
                }
              },
            axisTick: {            // 坐标轴小标记
                length: 10,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
            splitLine: {           // 分隔线
                length: 14,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              detail: {
                textStyle: {
                  fontSize: 20,
                }
              },
              data: [{
                value: 50
              }]
            }]
          };
          var option22 = {
            title: {
              text: '内存使用率',
              "x": "center",
              "y":"bottom"
            },
            series: [{
              name: '内存使用率',
              type: 'gauge',
              radius: '100%',
              splitNumber: 10,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width:6
                }
              },
            axisTick: {            // 坐标轴小标记
                length: 10,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
            splitLine: {           // 分隔线
                length: 14,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              detail: {
                textStyle: {
                  fontSize: 20,
                }
              },
              data: [{
                value: 50
              }]
            }]
          };
          var option23 = {
            title: {
              text: '磁盘占用率',
              "x": "center",
              "y":"bottom"
            },
            series: [{
              name: '磁盘占用率',
              type: 'gauge',
              radius: '100%',
              splitNumber: 10,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width:6
                }
              },
            axisTick: {            // 坐标轴小标记
                length: 10,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
                }
              },
            splitLine: {           // 分隔线
                length: 14,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              detail: {
                textStyle: {
                  fontSize: 20,
                }
              },
              data: [{
                value: 50
            // name: '使用率'
          }]
        }]
      };

      setInterval(function() {
        option21.series[0].data[0].value = (Math.random() * 50).toFixed(2) - 0;
        var myChart1 = echarts.init(document.getElementById('chart21'));
        myChart1.setOption(option21, true);

        option22.series[0].data[0].value = (Math.random() * 50).toFixed(2) - 0;
        var myChart2 = echarts.init(document.getElementById('chart22'));
        myChart2.setOption(option22, true);

        option23.series[0].data[0].value = (Math.random() * 50).toFixed(2) - 0;
        var myChart3 = echarts.init(document.getElementById('chart23'));
        myChart3.setOption(option23, true);

      }, 2000);
    </script>